<template>
  <ElementDialog
    ref="dialog"
    embed
    :visible="visible"
    title="办理意见"
    custom-class="approval-message-model"
    dialog-top="20vh"
    width="55vw"
    height="400px">
    <ElRow class="form-row">
      <ElCol :span="24">
        <ElInput
          v-model="message"
          type="textarea"
          show-word-limit
          :rows="8"
          maxlength="2000"
          :placeholder="placeholderContent" />
      </ElCol>
    </ElRow>
    <template #footer>
      <ElButton type="primary" @click="getMessage">确定</ElButton>
    </template>
  </ElementDialog>
</template>

<script>
  export default {
    name: 'AddSignatureModel',
    props: {
      visible: Boolean
    },
    data() {
      return {
        message: '',
        type: '',
        placeholderContent: '请输入办理意见'
      }
    },

    methods: {
      init() {},
      showModel(type, placeholder) {
        this.type = type
        this.placeholderContent = placeholder
      },
      getMessage() {
        if (this.$isBlank(this.message)) {
          this.$message.warning(this.placeholderContent)
          return
        }
        this.$emit('getMessage', this.message, this.type)
        this.$refs.dialog.hide()
      }
    }
  }
</script>

<style lang="scss">
  .approval-message-model {
    .el-transfer .el-transfer-panel {
      position: relative;
      display: inline-block;
      box-sizing: border-box;
      width: 360px;
      height: 300px;
      max-height: 100%;
      overflow: hidden;
      vertical-align: middle;
      background: #fff;
      border: 1px solid #ebeef5;
      border-radius: 4px;
    }

    .el-transfer-panel {
      position: relative;
      display: inline-block;
      box-sizing: border-box;
      width: 360px;
      height: 300px;
      max-height: 100%;
      overflow: hidden;
      vertical-align: middle;
      background: #fff;
      border: 1px solid #ebeef5;
      border-radius: 4px;
    }

    .el-transfer-panel__body {
      height: 300px;
      overflow: auto;
    }

    .el-transfer-panel__list.is-filterable {
      height: 300px;
      padding-top: 0;
    }
  }
</style>
